* {
    padding: 0;
    margin: 0;
}
html {
    height: 100%;
}
body {
    background: #000;
}

.font-wrapper {
    text-align: center;
    padding: 300px 0;
}
.font-wrapper > span {
    display: inline-block;
    font-family: "方正细金陵简体";
    font-size: 80px;
    color: #fff;
    font-weight: bold;
    text-shadow: -.05em 0 cyan, .05em 0 red;
    position: relative;

}

@keyframes douyin {
    0%{
        top: 0;
        transform: rotate(0deg);
    }
    50% {
        top: -150px;
        transform: rotate(180deg);
    }
    80%{
        top: 50px;
        transform: rotate(270deg);
    }
    100%{
        top: 0px;
        transform: rotate(360deg);
    }
}
.font-wrapper > span:nth-child(1){
    animation: douyin 0.8s ease-in-out 0s;
}
.font-wrapper > span:nth-child(2){
    animation: douyin 0.8s ease-in-out 0.2s;
}
.font-wrapper > span:nth-child(3){
    animation: douyin 0.8s ease-in-out 0.4s;
}
.font-wrapper > span:nth-child(4){
    animation: douyin 0.8s ease-in-out 0.6s;
}
.font-wrapper > span:nth-child(5){
    animation: douyin 0.8s ease-in-out 0.8s;
}
.font-wrapper > span:nth-child(6){
    animation: douyin 0.8s ease-in-out 1s;
}
.font-wrapper > span:nth-child(7){
    animation: douyin 0.8s ease-in-out 1.2s;
}
.font-wrapper > span:nth-child(8){
    animation: douyin 0.8s ease-in-out 1.4s;
}
.font-wrapper > span:nth-child(9){
    animation: douyin 0.8s ease-in-out 1.6s;
}
.font-wrapper > span:nth-child(10){
    animation: douyin 0.8s ease-in-out 1.8s;
}

